<!--
 * @Author: Bennty
 * @Date: 2024-11-20 10:21:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-20 16:23:30
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="生产订单详情" center width="50%" @close="handleClose">
        <div id="pdf-content" ref="printArea">
            <table class="order-table">
                <colgroup>
                    <col style="width: 12.5%;">
                    <col style="width: 12.5%;">
                    <col style="width: 12.5%;">
                    <col style="width: 12.5%;">
                    <col style="width: 12.5%;">
                    <col style="width: 12.5%;">
                    <col style="width: 12.5%;">
                    <col style="width: 12.5%;">
                </colgroup>
                <caption>
                    <h3>包装件工单</h3>
                </caption>
                <tr>
                    <td colspan="2" class="table-title">产品名称</td>
                    <td colspan="2">{{ detail?.packingName }}</td>
                    <td colspan="2" class="table-title">制单日期</td>
                    <td colspan="2">{{ detail?.createTime }}</td>
                </tr>
                <tr>
                    <td colspan="2" class="table-title">客户名称</td>
                    <td colspan="2"></td>
                    <td colspan="2" class="table-title">交货日期</td>
                    <td colspan="2">{{ detail?.deliveryDate }}</td>
                </tr>
                <tr>
                    <td colspan="2" class="table-title">生产单号</td>
                    <td colspan="2" class="img-col">
                        <img class="code-image" :src="detail?.codeUrl" alt="">
                        <div class="order-number">{{ detail?.packingProductCode }}</div>
                    </td>
                    <td colspan="2" class="table-title">生产数量</td>
                    <td colspan="2">{{ detail?.produceNumber }}</td>
                </tr>
                <tr>
                    <td colspan="8" class="table-title">
                        配料信息
                    </td>
                </tr>
                <tr>
                    <td colspan="5" class="table-title">部件名称</td>
                    <td colspan="1" class="table-title">单品数量</td>
                    <td colspan="1" class="table-title">总需求数</td>
                    <td colspan="1" class="table-title">库存数量</td>
                </tr>
                <tr>
                    <td colspan="2" :rowspan="detail?.productDetailVoList.length + 1" class="table-title">包装信息</td>
                </tr>
                <tr v-for="(item, index) in detail?.productDetailVoList" :key="index + 1">
                    <td colspan="3" class="item-info">{{ item.productName }}</td>
                    <td colspan="1" class="item-info">{{ item.proportionNumber }}</td>
                    <td colspan="1" class="item-info">
                        {{ item.needTotal }}
                    </td>
                    <td colspan="1" class="item-info">{{ item.inventoryNumber }}</td>
                </tr>
                <tr>
                    <td colspan="8">
                        <span class="table-title">包装人员信息</span>
                        <span style="margin-left: 20px;" class="table-title">包装工费：</span>
                        <span style="color: #69AFF0">{{ detail?.packagingLaborCost }}</span>
                    </td>
                </tr>
                <tr>
                    <td class="table-title">生产工号</td>
                    <td ></td>
                    <td ></td>
                    <td ></td>
                    <td ></td>
                    <td rowspan="2" colspan="1" class="table-title">生产总数</td>
                    <td rowspan="2" colspan="2"></td>
                </tr>
                <tr>
                    <td class="table-title">完工数量</td>
                    <td ></td>
                    <td ></td>
                    <td ></td>
                    <td ></td>
                </tr>
            </table>
            <el-row style="width: 90%; margin-top: 15px">
                <el-col :span="12">
                    <span>制单人：</span>
                    <span class="item-info">{{ detail?.createByName }}</span>
                </el-col>
                <el-col style="text-align: right" :span="12">
                    <span>制单时间：</span>
                    <span class="item-info">{{ detail?.createTime }}</span>
                </el-col>
            </el-row>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" @click="onClickPrint" >打印</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { printPackageProduceOrderApi } from '@/api/sj/productManagement/packageOrder';

const props = defineProps<{
    visible: boolean,
    orderDetails: any
}>();
const emits = defineEmits(['close']);
const detail = ref<any>();
const printArea = ref<HTMLElement | null>(null);

watch(()=>props.orderDetails, (newData)=>{
    detail.value = newData;
}, {deep: true});



const onClickPrint = async () => {
    if(printArea.value){
        // 保存当前页面的原始内容
        const originalContent = document.body.innerHTML
        // 获取要打印的内容
        const printContent = printArea.value.innerHTML

        // 替换页面内容为要打印的内容
        document.body.innerHTML = printContent

        // 调用打印
        window.print()

        // 打印后恢复原始内容
        document.body.innerHTML = originalContent
        
        const submitData = {
            id: detail.value.id
        };
        await printPackageProduceOrderApi(submitData);

        location.reload() // 可选：刷新页面以恢复事件监听
    };
};

const handleClose = () => {
    emits('close');
};
</script>

<style lang="scss" scoped>
#pdf-content{
    display: flex;
    justify-content: center;
    flex-flow:wrap
}
.item-info{
    color: #69AFF0;
}
.order-table{
    border-spacing: 0;
    border: 1px solid black;
    width: 90%;
    font-size: 20px;
    tr{
        border: 1px solid black;
    }
    td:not(.step-col){
        border: 1px solid black;
        text-align: center;
    }
    .img-col{
        text-align: center;
        .product-image{
            height: 300px;
            
        }
        .order-numbe{
            color: #69AFF0
        }
        .code-image{
            height: 80px
        }
    }
    .table-title{
        font-weight:bolder;
    }
    .step-col{
        border: 1px solid black;
        padding: 10px 10px 0 10px;
    }
}
</style>